<template>
  <div class="box">
    <TopSearch
      @searchHeader="searchHeader"
      @delsHeader="delsHeader"
      @addHeader="addHeader"
      :control="control"
      :controlPosition="[]"
      :positionName="''"
      :disabled="disabled"
      :delsable="delsable"
      :searchConfig="setFormConfig"
    />
    <ProTable
      class="protable"
      :data="tableData"
      :page="page"
      :column="column"
      :rowControl="rowControl"
      :elProps="elProps"
      :disabled="disabled"
      :controlWidth="controlWidth"
      @row-control-click="onRowControlClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
    >
   
    </ProTable>

    <FouDialog
      :title="'添加/修改'"
      :width="'50%'"
      v-model:dialogValue="dialogValue"
    >
      <template #content>
        <div>
        <addEdit :echo="echo" ref="AddEditref"></addEdit>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="dialogValue = false">取消</el-button>
          <el-button
            type="primary"
            @click="confirm(buttonType)"
            color="#081F42"
            >確定</el-button
          >
        </div>
      </template>
    </FouDialog>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted  } from "vue";
import { elProps,controlWidth } from "./index.js";
import { setFormConfig } from "./formConfig";
import addEdit from './addEdit/index.vue'
import {payment, addPayment, updatePayment,delPayment} from '@/http/index.js'
import {loading,closeLoading,message,messageBox} from '@/common/function.js'
 const echo = ref({})

// 添加編輯彈窗
const AddEditref = ref(null);
const confirm = (type) => {
  AddEditref.value.DialogCofirm(async(e)=>{
    console.log(e);
        if (e) {
          if (type == "add") {
                if (e.id) {
                  delete e.id;
                }
                await addStudentTypeList(e);
          }
          if (type == "edit") {
            await updateStudentTypeList(e);
          }
          dialogValue.value = false
    }
  });
};
const addStudentTypeList =async (e)=>{
    const data = await addPayment(e);
    if (data.code == 200) {
       await tableList();
      message('添加付款方式成功')
    }
}
const updateStudentTypeList =async (e)=>{
    const data =   await updatePayment(e);
    if (data.code == 200) {
       await tableList();
      message('修改付款方式成功')
    }
}
// 分页数据（不给就没有分页）
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 10, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
// 字段名对应表头
const column = {
  statuss:'狀態',
  name:'付款方式名稱',
  sort:'排序',
  create_time:'發佈日期',
  update_time: "修改日期",
};
// 表格顶部操作按钮
const control = ["search", "dels", "add"];

// 未选中数据是 禁用项
const disabled = ["dels"];
const delsable = ref(true);

const searchHeader = async(e) => {
    Object.assign(obj, e);
      await tableList()
};

const dialogValue = ref(false);
const addHeader = () => {
  buttonType.value = 'add'
    echo.value = {
    name: "",
    sort: "",
    status: '',
  };
  dialogValue.value = true;
};

// 表格行内操作按钮
const rowControl = ["rowedit", "rowdel"];
const buttonType = ref('')
// 表格行内操作
const onRowControlClick = ({ scope: { row }, type }) => {
  console.log(row,type)
  if (type == 'rowedit') {
    buttonType.value = 'edit'
    const {id,name,sort,status} = row
     echo.value = {id,name,sort,status}
    //  if (status == '正常') {
    //  echo.value.status = 1
    //  }else{ echo.value.status = -1}
      dialogValue.value = true;
  }
  if (type == 'rowdel') {
    messageBox().then(async ()=>{
      await delStudentTypeList(row.id)
    })
  }
}
const delStudentTypeList = async(e)=>{
    const data = await delPayment(e)
    if (data.code == 200) {
      await tableList()
      message('成功刪除付款方式')
    }
}
const ids = ref('')
const onSelectionChange = (e) => {
    let row_id = []
  e.forEach(e => {
    row_id.push(e.id)
  });
  ids.value = row_id.toString()
  delsable.value = e.length === 0;
}
const delsHeader = () => {
    messageBox().then(async () => {
        await delStudentTypeList(ids.value) 
    })
};
const onPageChange = async({ e, type }) => {
  if (type == "current") {
    obj.page = e
  }
  if (type == "size") {
     obj.page = 1
    obj.limit = e
  }
  await tableList()
};
// 弹窗
const dialogVisible = ref(false);
const handleClose = (done) => {
  dialogVisible.value = false;
};

const obj = reactive({
  // school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  name: "",
  status: "",
  time: "",
});
const tableData = ref([])
const tableList = async ()=>{
  loading()
  const data = await payment(obj)
  if (data.code == 200) {
    data.data.data.map(e=>e.status == 1 ?  e.statuss = '正常' :    e.statuss = '禁用')
    tableData.value = data.data.data
    page.current_page = data.data.current_page
    page.per_page = data.data.per_page
    page.total = data.data.total
  }
  closeLoading()
}
const pageRefresh = async()=>{
  await tableList()
}
onMounted(() => {
  tableList();
});
</script>

<style lang="less" scoped>
//  .el-table .warning-row {
//   --el-table-tr-bg-color: red;
// }
// .el-table .success-row {
//   --el-table-tr-bg-color: var(--el-color-success-light-9);
// }
.box {
  padding: 16px 33px;
}
</style>